<template>
	<view class="wrap">
		<view class="price-wrap">
			<view class="price">
				￥{{dataObj.amount}}
			</view>
			<view>
				{{countdown2}}
			</view>
		</view>
		
		<view class="inner-wrap">
			<view>
				销售人：
			</view>
			<view class="chushouren">
				姓名：{{dataObj.other_name}} 手机：{{dataObj.other_account}}
			</view>
			
				<view style="padding:10rpx 0 6rpx 0;">销售凭证</view>
				<view class="xiaoshou-wrap">
					
					<image  @click="previewImage" :src="dataObj.certificate" mode=""></image>
				</view>
				<view class="page-bottom">
					
					<view class="tip">
						<view class="item" v-for="(item,index) in dataObj.note" :key="index">
							{{item}}
						</view>
					</view>
					<view class="sub-data">
						<view class="left" @click="shensu">
							我要申诉
						</view>
						<view class="right" @click="queren">
							确认售出
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function leftTimer(leftTime){
	 if(leftTime<=0){
	 		 return '00:00:00'
	 }
	 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 
	 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 
	 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 
	 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 
	 days = checkTime(days); 
	 hours = checkTime(hours); 
	 minutes = checkTime(minutes); 
	 seconds = checkTime(seconds); 
	return `${hours}:${minutes}:${seconds}`
	
	} 
	function checkTime(i){ //将0-9的数字前面加上0，例1变为01 
	 if(i<10) 
	 { 
	 i = "0" + i; 
	 } 
	 return i; 
	}
	export default{
		data(){
			return{
				countdown2:'',
				timer:'',
				img_url:'',
				data:{
					
				},
				dataObj:{
					note:[]
				},
				nowindex:1
			}
		},
		onunload(){
			let that=this
			clearInterval(that.timer)
		},
		onLoad(options) {
			this.data=JSON.parse(options.data)
			this.getData()
		},
		methods:{
			// 多张 图片预览 
			previewImage() { // index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
				let that=this
				uni.previewImage({
					
					urls:[that.dataObj.certificate] ,    // 需要预览的图片列表，photoList要求必须是数组
					
				})
			},

			shensu(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认申诉？',
					success: function (res) {
						if (res.confirm) {
							that.apipost('/api/groupbuy/appeal',{
								
								id:that.data.id
							},true).then(res => {
								if(res.Code==10200){
									uni.showToast({
										title: res.Message,
										icon: "none",
										duration:4000,
									});
									
								}
							
							}).catch(err=>{
								console.log(err)
							});
								
								
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			queren(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认售出？',
					success: function (res) {
						if (res.confirm) {
							that.apipost('/api/groupbuy/confirm_sell',{
								
								id:that.data.id
							},true).then(res => {
								if(res.Code==10200){
									uni.showToast({
										title: res.Message,
										icon: "none",
										duration:4000,
									});
									uni.navigateBack({
										delta:1,//返回层数，2则上上页
									})
								}
							
							}).catch(err=>{
								console.log(err)
							});
								
								
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getData(){
				let that=this
				
				that.apipost('/api/groupbuy/sell_detail',{
					id:that.data.id,
					
				},true).then(res => {
					if(res.Code==10200){
						let data=res.Data
						that.dataObj=data
						
						that.countdown2=leftTimer(that.dataObj.countdown)
						that.timer=setInterval(function(){
							that.countdown2=leftTimer(that.dataObj.countdown)
							
							that.dataObj.countdown=that.dataObj.countdown-1000
							
						},1000)
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style>
	.page-bottom{
		position:absolute;
		bottom:0;
		width:100%;
		padding-bottom:15rpx;
	}
	.tip{
		margin:20rpx 0 10rpx 0
	}
	.sub-data .right{
		width:240rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		height:76rpx;
		border-radius:30rpx;
		background:#f86812;
	}
	.sub-data .left{
		width:240rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		height:76rpx;
		border-radius:30rpx;
		background:#ff2823;
	}
	.sub-data{
		width:554rpx;
		
		color:#fff;
		display:flex;
		align-items: center;
		justify-content: space-between;
		
		
		margin:0 auto;
		margin-top:32rpx;
	}
	.xiaoshou-wrap{
		margin:0 auto;
		height:644rpx;
		width:644rpx;
		border:1rpx solid #5c5c5c;
		
		box-sizing: border-box;
		border-radius:50rpx;
	}
	.xiaoshou-wrap uni-image{
		border-radius: 50rpx;
	}
	.shoukuan-wrap .erweima{
		width:382rpx;
		height:382rpx;
		border:1rpx solid #5c5c5c;
		background:#fff;
		box-sizing: border-box;
		border-radius:40rpx;
	}
	.shoukuan-wrap{
		display:flex;
	}
	.btn-wrap .item{
		border:1rpx solid #5c5c5c;
		flex:1;
		height:90rpx;
		background:#fff;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.btn-wrap .active{
		background:#f58637;
		color:#fff;
	}
	.btn-wrap{
		border:1rpx solid #5c5c5c;
		display:flex;
	}
	.method-wrap{
		background:#fff;
		border:1rpx solid #5c5c5c;
		
	}
	.price-wrap .price{
		font-size:46rpx;
		padding:40rpx 0 50rpx 0;
	}
	page{
		background:url(/static/daixiaoshoudetail.png) no-repeat center 0 #f5f5f5;
		background-size:100% auto;
	}
	.price-wrap{
		text-align: center;
		color:#fff;
		font-size:32rpx;
		margin-bottom:80rpx;
	}
	.inner-wrap{
		position:absolute;
		bottom:10rpx;
		left:29rpx;
		right:29rpx;
		top:220rpx;
		margin:0 auto;
		background:#fff;
		padding:52rpx 24rpx 100rpx 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.chushouren{
		border:1rpx solid #6d6d6d;
		border-radius:10rpx;
		padding-left:48rpx;
		margin-top:10rpx;
		background:#f5f5f5;
		height:72rpx;
		display:flex;
		align-items: center;
		margin-bottom:40rpx;
	}
	.wrap{
		position:relative;
		height:100%;
	}
</style>